<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
	<ul>
		{% for article in  articles %}
			<li>{{ article.name }}</li>
		{% endfor %}
	</ul>
	<nav aria-label="Page navigation">
	  <ul class="pagination">
		  {% if page_obj.has_previous %}
			  <li >
	            <a href="{% url "listview" %}?page={{ page_obj.previous_page_number }}" aria-label="Previous">
	            <span aria-hidden="true">&laquo;</span>
	            </a>
	        </li>
		  {% else %}
			  <li class="disabled">
	            <a href="javascript:;" aria-label="Previous">
	            <span aria-hidden="true">&laquo;</span>
	            </a>
	        </li>
		  {% endif %} 
			{% for page in paginator.page_range %}
				{% if page == page_obj.number %}
					<li class="active"><a href="javascript:;">{{ page }}</a></li>
				{% else %}
					<li><a href="{% url "listview" %}?page={{ page }}">{{ page }}</a></li>
				{% endif %} 

			{% endfor %}
		  {% if page_obj.has_next %}
			  <li >
	            <a href="{% url "listview" %}?page={{ page_obj.next_page_number }}" aria-label="Previous">
	            <span aria-hidden="true">&laquo;</span>
	            </a>
	        </li>
		  {% else %}
			  <li class="disabled">
	            <a href="javascript:;" aria-label="Previous">
	            <span aria-hidden="true">&laquo;</span>
	            </a>
	        </li>
		  {% endif %}
	  </ul>
	</nav>
</body>
</html>